<template>
	<div>
		<el-form ref="queryFrom" size="small" :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item prop="name" label="赠品名称">
				<el-input v-model="queryForm.gift.goods.gname" placeholder="请输入赠品名称" style="width: 140px"></el-input>
			</el-form-item>
			<el-form-item prop="brand" label="品牌" :label-width="'60px'">
				<el-select v-model="queryForm.gift.goods.gbrand" placeholder="请选择品牌" style="width: 150px">
					<el-option v-for="item in brandList" :key="item.id + ''" :label="item.brandName"
						:value="item.brandName">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="status" label="审核状态">
				<el-select v-model="queryForm.applyStatus" placeholder="请选择审核状态" style="width: 150px">
					<el-option v-for="item in statusList" :key="item.dicDataId" :label="item.dicDataLabel"
						:value="item.dicDataLabel">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="mini" @click="doQuery()" icon="el-icon-search">搜索</el-button>
				<el-button type="primary" size="mini" plain icon="el-icon-refresh" @click="resetQueryForm()">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button type="primary" icon="el-icon-plus" size="mini" plain @click="showAdd">新增赠品转商品
		</el-button>
		<!-- 展示数据 -->
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="gift.goods.gname" label="赠品名称" width="320">
			</el-table-column>
			<el-table-column prop="gift.goods.gbrand" label="赠品品牌" >
			</el-table-column>
			<el-table-column prop="gift.goods.marketPrice" label="赠品价格" ></el-table-column>
			<el-table-column prop="gift.giftStock" label="增品库存数" >
			</el-table-column>
			<el-table-column prop="count" label="增转商数" >
			</el-table-column>
			<el-table-column prop="applyStatus" label="审核状态">
			</el-table-column>
			
			<el-table-column label="操作" align="center" min-width="200">
				<template slot-scope="scope">
					<el-button size="mini" plain small @click="showDetail(scope.row)">查看</el-button>
					<el-button size="mini" plain mini v-show="scope.row.applyStatus=='草稿'" @click="showUpdate(scope.row)">修改</el-button>
					<el-button type="danger" size="mini" plain mini v-show="scope.row.applyStatus=='草稿'"  @click="deleteApply(scope.row)">删除</el-button>
					<el-button size="mini" plain mini @click="followHistory(scope.row)" style="width: 100px">审核跟踪
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.pageNum" :page-sizes="[5, 10, 15]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>

		<!-- 转赠品弹框 -->
		<el-dialog :title="dialogTitle" :visible.sync="gift2GoodsDialogFormVisible">
			<el-form :model="form" size="small">
				<el-form-item :label-width="formLabelWidth">
					<el-button type="primary" size="mini" @click="showSelectGiftDialog" plain v-show="dialogTitle!='查看详情'">选择赠品</el-button>
				</el-form-item>
				<el-form-item label="赠品名称" :label-width="formLabelWidth">
					<el-input v-model="form.gift.goods.gname" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="赠品品牌" :label-width="formLabelWidth">
					<el-input v-model="form.gift.goods.gbrand" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="赠品类型" :label-width="formLabelWidth">
					<treeselect v-model="form.gift.goods.gtype" placeholder="赠品类型" style="width:190px;" clearable
						:options="goodsTypeTree" :normalizer="normalizer" disabled/>
				</el-form-item>
				<el-form-item label="赠品型号" :label-width="formLabelWidth">
					<el-input v-model="form.gift.goods.gmodel" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="赠品颜色" :label-width="formLabelWidth">
					<el-select v-model="form.gift.goods.gcolor" placeholder="请选择" disabled>
						<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item label="赠品市场价" :label-width="formLabelWidth">
					<el-input v-model="form.gift.goods.marketPrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="采购成本" :label-width="formLabelWidth">
					<el-input v-model="form.gift.goods.purchasePrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="赠品库存量" :label-width="formLabelWidth">
					<el-input v-model="form.gift.giftStock" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="转商品数量" :label-width="formLabelWidth">
					<el-input v-model="form.count" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="save()" v-show="dialogTitle!='查看详情'">草稿</el-button>
				<el-button @click="submit()" v-show="dialogTitle!='查看详情'">提交</el-button>
				<el-button @click="closeForm()">关闭</el-button>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="selectGiftVisible" width="980px">
			<el-form :model="queryGiftForm" size="small" ref="queryGiftForm" :inline="true" class="demo-form-inline">
				<el-form-item label="名称:" prop="gcode">
					<el-input v-model="queryGiftForm.goods.gname" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="型号:" prop="gmodel">
					<el-input v-model="queryGiftForm.goods.gmodel" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="颜色" prop="gcolor">
					<el-select v-model="queryGiftForm.goods.gcolor" placeholder="请选择" clearable style="width:100px">
						<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="listGift" size="mini" icon="el-icon-search" plain>搜索
					</el-button>
					<el-button icon="el-icon-refresh" @click="resetQueryGiftForm()" size="mini" plain>重置
					</el-button>
				</el-form-item>
				<div>
					<el-table ref="giftTableData" :data="giftTableData" tooltip-effect="dark">
						<el-table-column prop="goods.gcode" label="编码"></el-table-column>
						<el-table-column prop="goods.gname" label="名称"></el-table-column>
						<el-table-column prop="goods.gbrand" label="品牌"></el-table-column>
						<el-table-column prop="goods.gmodel" label="型号"></el-table-column>
						<el-table-column prop="goods.gcolor" label="颜色">
							<template slot-scope="scope">
								<div v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
									:value="dict.dicDataVal">
									<div v-if="scope.row.gcolor == dict.dicDataVal">
										{{dict.dicDataLabel}}
										</v-if>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="operate" label="操作">
							<template slot-scope="scope">
								<el-button type="success" icon="el-icon-circle-check"
									@click="setGift(scope.$index, scope.row)" size="mini" plain>选择
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
						:current-page="queryGiftForm.pageNum" :page-sizes="[10,20,30,40]"
						:page-size="queryGiftForm.pageSize" layout="->, total, sizes, prev, pager, next, jumper"
						:total="queryGiftForm.totalNum">
					</el-pagination>
				</div>
			</el-form>
		</el-dialog>
		
		<el-dialog title="审核记录" :visible.sync="processTaskVisble" width="70%">
			<el-table ref="processTaskTableData" :data="processTaskTableData" tooltip-effect="dark">
				<el-table-column prop="taskName" label="任务名"  align="center"></el-table-column>
				<el-table-column prop="taskUser" label="审批人员" align="center"></el-table-column>
				<el-table-column prop="taskBegin" label="产生时间"  align="center"></el-table-column>
				<el-table-column prop="claimTime" label="签收时间"  align="center"></el-table-column>
				<el-table-column prop="taskEnd" label="审核时间"  align="center"></el-table-column>
				<el-table-column prop="approveResult" label="结果" align="center"></el-table-column>
				<el-table-column prop="approveContent" label="意见" align="center"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
	
</template>

<script>
	import {
		getDistinctBrand
	} from '@/api/gg/brand.js';
	import {
		getGoodsTypeTree
	} from '@/api/gg/goodsType.js';
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		components: {
			Treeselect
		},
		data() {
			return {
				totalNum: 0,
				queryForm: {
					gift:{
						goods:{
							gname: "",
							gbrand: "",
						}
					},
					applyStatus: "",
					pageNum: 1,
					pageSize: 10
				},
				queryGiftForm: {
					goods:{
						gname: null,
						gmodel: null,
						gcolor: null,
					},
					pageNum: 1,
					pageSize: 10,
					totalNum: null
				},
				tableData: [],
				brandList: [],
				goodsTypeTree: [],
				colorList: [],
				statusList: [],
				form: {
					id:null,
					giftId:null,
					count:null,
					applyUser:null,
					applyStatus:null,
					gift:{
						goods:{
							gname:null,
							gbrand:null,
							gcolor:null,
							gtype:null,
							purchasePrice:null,
							marketPrice:null
						}
					}
				},
				formLabelWidth: "120px",
				gift2GoodsDialogFormVisible: false,
				dialogTitle:null,
				selectGiftVisible: false,
				processTaskVisble:false,
				processTaskTableData:[],
				giftTableData: [],
				normalizer(node) {
					return {
						id: node.id,
						label: node.typeName,
						children: node.children,
					}
				},
			};
		},
		methods: {
			
			closeForm() {
				this.resetForm();
				this.gift2GoodsDialogFormVisible = false;
			},
			
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
			},
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
			},
			handleSizeChange2(val) {
				this.queryGiftForm.pageSize = val;
			},
			handleCurrentChange2(val) {
				this.queryGiftForm.pageNum = val;
			},
			doQuery(){
				axios.get('/gift2Goods?'+this.qs_stringify(this.queryForm)).then(resp=>{
					this.tableData=resp.data.list;
					this.queryForm.pageNum=resp.data.pageNum;
					this.queryForm.pageSize=resp.data.pageSize;
					this.totalNum=resp.data.total;
				})
			},
			showDetail(row){
				this.form=JSON.parse(JSON.stringify(row));
				this.dialogTitle="查看详情";
				this.gift2GoodsDialogFormVisible=true;
			},
			showUpdate(row){
				this.form=JSON.parse(JSON.stringify(row));
				this.dialogTitle="修改申请单";
				this.gift2GoodsDialogFormVisible=true;
			},
			showAdd(){
				this.resetForm();
				this.dialogTitle="添加赠转商申请单";
				this.gift2GoodsDialogFormVisible=true;
			},
			resetForm(){
				this.form={
					id:null,
					giftId:null,
					count:null,
					applyUser:null,
					applyStatus:null,
					gift:{
						goods:{
							gname:null,
							gbrand:null,
							gcolor:null,
							gtype:null,
							purchasePrice:null,
							marketPrice:null
						}
					}
				}
			},
			resetQueryForm() {
				this.queryForm = {
					gift:{
						goods:{
							gname: null,
							gbrand: null,
						}
					},
					applyStatus: null,
					pageNum: 1,
					pageSize: 10
				};
				this.doQuery();
			},
			resetQueryGiftForm() {
				this.queryGiftForm = {
					goods:{
						gname: null,
						gmodel: null,
						gcolor: null,
					},
					pageNum: 1,
					pageSize: 10,
					totalNum: null
				};
			},
			save(){
				axios.post("gift2Goods/cg",this.form).then(resp=>{
					if(resp.code==20000){
						this.suc("保存草稿成功");
					}else{
						this.error(resp.msg);
					}
					this.gift2GoodsDialogFormVisible=false;
					this.doQuery();
				})
			},
			submit(){
				axios.post("gift2Goods/tj",this.form).then(resp=>{
					if(resp.code==20000){
						this.suc("提交审核成功");
					}else{
						this.error(resp.msg);
					}
					this.gift2GoodsDialogFormVisible=false;
					this.doQuery();
				})
			},
			deleteApply(row){
				axios.delete('gift2Goods/'+row.id).then(resp=>{
					if(resp.code==20000){
						this.suc(resp.msg);
					}else{
						this.error(resp.msg);
					}
					this.doQuery();
				})
			},
			setGift(i,row) {
				this.form.gift=JSON.parse(JSON.stringify(row));
				this.form.giftId=row.id;
				this.selectGiftVisible=false;
				this.giftTableData=[];
				this.resetQueryGiftForm();
			},
			listGift() {
				axios.get('/gift?'+this.qs_stringify(this.queryGiftForm)).then(resp=>{
					this.giftTableData=resp.list;
					this.queryGiftForm.pageNum=resp.pageNum;
					this.queryGiftForm.pageSize=resp.pageSize;
					this.queryGiftForm.totalNum=resp.total;
				})
			},
			showSelectGiftDialog() {
				this.selectGiftVisible = true;
				this.resetQueryGiftForm();
			},
			followHistory(row){
				axios.get("/gift2Goods/audit/"+row.id).then(resp=>{
					debugger;
					this.processTaskTableData=resp.data;
					this.processTaskVisble=true;
				})
			}
		},
		created() {
			this.getDictItems("review").then(resp => {
				this.statusList = resp.data;
			});
			this.getDictItems("phone_color").then(resp => {
				this.colorList = resp.data;
			});
			getDistinctBrand().then(resp => {
				this.brandList = resp.data;
			});
			getGoodsTypeTree().then(resp => {
				this.goodsTypeTree = resp.data;
			});
		},
		mounted() {
			this.doQuery();
		},
	};
</script>

<style scoped>
	a {
		color: #409eff;
		font-size: 16px;
	}

	.mytag {
		width: 200px;
		height: 40px;
		font-size: 15px;
	}
</style>
